<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">结果</view>
		</view>
		<view class="body">
			<view class="body-result">
				<view class="icon"></view>
	
				<view class="tip">
					名师一对一解答，服务时间内解答人数有限，若未能及时解答，敬请谅解！
				</view>
			</view>
			<view class="body-recommend">
				<view class="body-recommend-title">
					根据您的问题为您推荐：
				</view>
				<view class="body-recommend-piece" v-for="item,index in questions" v-if="index<3" :key="index" @click="detailsclick(item)">
					<view class="body-recommend-piece-header">
						<view class="body-recommend-piece-header-icon"></view>
						<view class="body-recommend-piece-header-text">{{item.studioName}}</view>
						<view class="body-recommend-piece-header-time">{{item.time}}</view>
					</view>
					<view class="body-recommend-piece-student">
						<view class="body-recommend-piece-student-icon"></view>
						<view class="body-recommend-piece-student-text">{{item.studentName}}:{{item.question}}</view>
					</view>
					<view class="body-recommend-piece-teacher">
						<view class="body-recommend-piece-teacher-icon"></view>
						<view class="body-recommend-piece-teacher-text">{{item.teacherName}}:{{item.wordAnswer}}</view>
						<view class="body-recommend-piece-teacher-details"></view>
					</view>
				</view>
				
			</view>
			<view class="body-shared">
				<view class="body-shared-title">
					共享优课：
				</view>
				<view class="body-shared-video">
					<view class="body-lecture-piece shadow" v-for="item,index in video" :key="item.id">
						<video @play="playing" :id="item.id" class="body-lecture-piece-video video" :src="item.url" poster="../../static/index/video.svg"></video>
						<view class="body-lecture-piece-title">
							<view class=""></view>
							<view class="body-lecture-piece-icon"></view>
							<view class="body-lecture-piece-text textover">{{item.title}}</view>
						</view>
						<view class="body-lecture-piece-introduction textover">{{item.introduction}}</view>
						<view class=""></view>
					</view>
				</view>
			</view>
		</view>
		<view class="body-button" @click="returnclick2()">
			返回我的提问
		</view>
	</view>
</template>

<script>
	import { getQuestionbank, getQuestionByContent, getyoukelist, getyoukelink } from "@/api/index";
	export default {
		data() {
			return {
				questions: [],
				video:[],
				videoContent: null,
			}
		},
		// computed: {
		//    refresh() {
		//       return this.$store.state.user.refresh
		//    },
		// },
		// watch: {
		// 	refresh: {
		// 		immediate: true,
		// 		handler: function(newval) {
		// 			console.log("newval",newval)
		// 			this.Initialize()
		// 		}
		// 	}
		// },
		created() {
		   this.Initialize()
		},
		onShow() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.questionbank()
				this.youkelist()
			},
			playing(e) {
				// console.log("e",e.target.id)
				let currentId = e.target.id
				this.videoContent = uni.createVideoContext(currentId)
				let video = this.video
				for (let i = 0; i < video.length; i++) {
				  let temp = video[i].id
				  if (temp !== currentId) {
					uni.createVideoContext(temp).pause()
				  }
				}
			},
			youkelist(){
				let recommend = this.$store.state.user.recommend
				let data = {
					"questionContent": recommend.question,
					"gradeCode": recommend.gradeId,
					"periodCode": recommend.periodId,
					"subjectCode": recommend.subjectId,
				}
				getyoukelist(data).then(res => {
					// console.log("res",res)
					let data = res.rows
					this.video = []
					for(let i in data){
						if(i<4){
							this.video.push({
								id: "video"+i,
								title: data[i].tagsName,
								introduction: data[i].topic,
								topicId: data[i].topicId,
								url: '',
							})
						}
					}
					this.youkelink()
				});
			},
			youkelink(){
				for(let i in this.video){
					let data = {
						"cpId": this.video[i].topicId,
					}
					getyoukelink(data).then(res => {
						this.video[i].url = res.data.data
					});
				}
			},
			questionbank(){
				let data = this.$store.state.user.recommend
				getQuestionByContent(data).then(res => {
					this.questions =[]
					let data = res.rows
					for(let i in data){
						data[i].time = this.timeago(data[i].createTime ? data[i].createTime.replace(/-/g,"/") : '')
						data[i].question = this.dealdata(data[i].question)
						data[i].wordAnswer = this.dealdata(data[i].wordAnswer)
						this.questions.push(data[i])
					}
					console.log("this.questions",this.questions)
				});
			},
			timeago(dateTimeStamp){
				if(dateTimeStamp==null||dateTimeStamp==""){
					return ''
				}
				dateTimeStamp = new Date(dateTimeStamp).getTime()
				
				var minute = 1000 * 60;      //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime();   //获取当前时间毫秒
				var diffValue = now - dateTimeStamp;//时间差
			
				if(diffValue < 0){
					return;
				}
				var minC = diffValue/minute;  //计算时间差的分，时，天，周，月
				var hourC = diffValue/hour;
				var dayC = diffValue/day;
				var weekC = diffValue/week;
				var monthC = diffValue/month;
				var result
				if(monthC >= 1){
					result = " " + parseInt(monthC) + "月前"
				}else if(weekC >= 1 && weekC < 4){
					result = " " + parseInt(weekC) + "周前"
				}else if(dayC >= 1 && dayC < 7){
					result = " " + parseInt(dayC) + "天前"
				}else if(hourC >= 1 && hourC < 24){
					result = " " + parseInt(hourC) + "小时前"
				}else if(minC >= 1 && minC < 60){
					result =" " + parseInt(minC) + "分钟前"
				}else if(diffValue >= 0 && diffValue <= minute){
					result = "刚刚"
				}else {
					var datetime = new Date();
					datetime.setTime(dateTimeStamp);
					var Nyear = datetime.getFullYear();
					var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
					var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					result = Nyear + "-" + Nmonth + "-" + Ndate
				}
				return result;
			},
			dealdata(data){
				// console.log('data',data)
				let result = ''
				if(data){
					if(data.indexOf("||||||") != -1){
						result = data.replace(/\|\|\|\|\|\|/g,"|")
					}else{
						result = data
					}
				}
				// console.log("result",result)
				return result
			},
			detailsclick(item){
				console.log("item",item)
				this.$store.state.user.questionid = item.id
				this.$store.state.user.urlquestion = '/pages/aqc/result'
				this.$store.state.user.refresh=!this.$store.state.user.refresh
				
				this.$store.state.user.myquestion = item
				this.$router.push('/pages/aqc/questions')
			},
			returnclick(){
				this.$store.state.user.refresh = !this.$store.state.user.refresh
				this.$router.push('/pages/aqc/startask')
			},
			returnclick2(){
				this.$store.state.user.refresh = !this.$store.state.user.refresh
				this.$store.state.user.switch = 0
				this.$router.push('/pages/mine/index')
			},
		},
	}
</script>

<style>
	.container {
		font-size: 4vw;
		width: 100vw;
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw auto 12.5vw;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid#F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		margin: 0 0 0 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-row-gap: 5vw;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 63vw auto auto;
		overflow: auto;
	}
	.body-result{
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	.icon {
		width: 100%;
		height: 54vw;
		background: url(../../static/aqc/result.svg);
		background-size: 100% 100%;
	}
	.tip {
		width: 70vw;
		margin: -7vw auto 0;
	}
	.body-recommend{
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: auto auto auto;
		background: #ffffff;
	}
	.body-recommend-title{
		padding: 3vw 0 0 3vw;
		width: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		font-size: 5vw;
	}
	.body-recommend-piece{
		margin: 0 0 4vw 0;
		padding: 2vw 1vw;
		width: 90vw;
		height: 30vw;
		background: #ffffff;
		border-radius: 2vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 10% 80% 10%; */
		grid-template-rows: 1fr 1fr 1fr;
		cursor: pointer;
	}
	.body-recommend-piece-header{
		/* width: 95%; */
		width:83.6vw;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%; 
		/* grid-template-rows: 20vh 1fr; */
		font-size: 3.6vw;
	}
	.body-recommend-piece-header-icon{
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/studio.png);
		background-size: 100% 100%;
	}
	.body-recommend-piece-header-text{
		/* width: 100%; */
		width: 61.6vw;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow: ellipsis;
		overflow:hidden;
		color: #515257;
	}
	.body-recommend-piece-header-time{
		margin: 0 0 0 auto;
		color: #B3B5B9;
	}
	.body-recommend-piece-student{
		/* width: 95%; */
		width:83.6vw;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%; 
		/* grid-template-rows: 20vh 1fr; */
	}
	.body-recommend-piece-student-icon{
		margin: -1vw 0 0 0;
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/student.png);
		background-size: 100% 100%;
	}
	.body-recommend-piece-student-text{
		width: 61.6vw;
		font-weight: 600;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow: ellipsis;
		overflow:hidden;
		color: #686B73;
	}
	.body-recommend-piece-teacher{
		/* width: 95%; */
		width:83.6vw;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%;
		/* grid-template-rows: 20vh 1fr; */
		font-size: 3vw;
	}
	.body-recommend-piece-teacher-icon{
		margin: -1vw 0 0 0;
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/teacher.png);
		background-size: 100% 100%;
	}
	.body-recommend-piece-teacher-text{
		width: 61.6vw;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow: ellipsis;
		overflow:hidden;
		color: #686B73;
	}
	.body-recommend-piece-teacher-details{
		margin: 0 0 0 auto;
		width: 10vw;
		height: 5vw;
		background: url(../../static/hot/details.svg);
		background-size: 100% 100%;
	}
	
	.body-shared{
		margin: 0 0 0 0;
		padding: 0 0 3vw 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: auto auto;
		background: #ffffff;
	}
	
	.body-shared-title{
		padding: 3vw 0 3vw 3vw;
		width: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		font-size: 5vw;
	}
	.body-shared-video{
		width: 94vw;
		height: auto;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-column-gap: 2vw;
		grid-row-gap: 2vw;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	.body-lecture-piece{
		width: 46vw;
		height: 32.2vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr 1fr; */
		grid-template-rows: 60% 25% 15%;
		border-radius: 2.2vw;
		background-color: #ffffff;
	}
	.body-lecture-piece-video{
		width: 100%;
		height: 100%;
		border-radius: 2.2vw  2.2vw  0vw 0vw;
	}
	.body-lecture-piece-title{
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-column-gap: 1vw;
		grid-template-columns: 1fr auto auto 1fr;
	}
	.body-lecture-piece-icon{
		width: 4vw;
		height: 4vw;
		background: url(../../static/index/hot.gif);
		background-size: 100% 100%;
	}
	.body-lecture-piece-text{
		/* width: 40vw; */
		font-size: 4vw;
		font-weight: 600;
	}
	.body-lecture-piece-introduction{
		width: 45vw;
		font-size: 3vw;
	}
	.textover{
		overflow: hidden;  /* 超出一行文字自动隐藏 */
		text-overflow: ellipsis;  /*文字隐藏后添加省略号*/
		white-space: nowrap;   /*强制不换行*/
	}
	
	.body-button{
		width: 95vw;
		height: 10vw;
		border-radius: 5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* font-size: 4vw; */
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
</style>